<template>
  <div class="table2">
    <a-layout class="h-full">
      <a-layout-content class="overflow-y-auto m-relative">
        <a-card class="mb-20">
          <template #title>
            <a-space class="m-sticky t-0"> </a-space>
          </template>
          <a-checkbox-group v-model="currentPermissionsList">
            <a-card class="mb-20" :title="item.name" v-for="item in guardNameForPermissionsList" :key="item.id">
              <template #extra>
                <a-space>
                  <a-button type="dashed" size="mini" @click="handleChangeAll(item.permission, true)">全选</a-button>
                  <a-button type="dashed" size="mini" @click="handleChangeAll(item.permission, false)">全不选</a-button>
                </a-space>
              </template>
              <a-checkbox
                style="width: 13%"
                class="mb-20"
                v-for="itemb in item.permission"
                :key="itemb.name"
                :value="itemb.name"
                >{{ itemb.display_name }}</a-checkbox
              >
            </a-card>
          </a-checkbox-group>
        </a-card>
      </a-layout-content>
      <a-layout-footer class="h-12n flex-center pt-20">
        <a-space>
          <a-button type="dashed" @click="checkAll">勾选所有权限</a-button>
          <a-button type="dashed" @click="currentPermissionsList = []">清空所有勾选</a-button>
          <a-button type="primary" @click="onOk" :loading="loading">提交</a-button>
        </a-space>
      </a-layout-footer>
    </a-layout>
  </div>
</template>

<script setup>
import { guardNameForPermissions, currentPermissions, roleAdminAdd } from '@/apis'
import { Message } from '@arco-design/web-vue'
import { useTabsStore } from '@/store'

defineOptions({ name: 'pAssignment' })

const tabsStore = useTabsStore()
const route = useRoute()
tabsStore.changeTagTitle(`角色[${route.query?.name || ''}]权限分配`)
const guardNameForPermissionsList = ref([])
const currentPermissionsList = ref([])
let allPermissionsList = []
const loading = ref(false)

// 获取所有权限组
const getGuardNameForPermissions = async () => {
  const res = await guardNameForPermissions()
  guardNameForPermissionsList.value = res.data
  const arr = []
  guardNameForPermissionsList.value.forEach((element) => {
    element.permission.forEach((item) => {
      arr.push(item.name)
    })
  })
  allPermissionsList = arr
}
getGuardNameForPermissions()

const getData = async () => {
  const res = await currentPermissions({ id: route.query.id })
  currentPermissionsList.value = res.data.data.map((item) => {
    return item.name
  })
}

getData()

const handleChangeAll = (permission, value) => {
  const arr = permission.map((element) => {
    return element.name
  })
  if (value) {
    const currentPermissionsListO = currentPermissionsList.value.concat(arr)
    currentPermissionsList.value = [...new Set(currentPermissionsListO)]
  } else {
    arr.forEach((element) => {
      const index = currentPermissionsList.value.findIndex((item) => {
        return item === element
      })
      if (index !== -1) {
        currentPermissionsList.value.splice(index, 1)
      }
    })
  }
}

const checkAll = () => {
  currentPermissionsList.value = JSON.parse(JSON.stringify(allPermissionsList))
}

const onOk = async () => {
  try {
    loading.value = true
    await roleAdminAdd({
      id: route.query.id,
      permissions: currentPermissionsList.value
    })
    Message.success('操作成功')
    tabsStore.closeCurrent(route.fullPath, { name: 'role' })
  } finally {
    loading.value = false
  }
}
</script>

<style lang="scss" scoped>
.table2 {
  height: 100%;
  overflow: hidden;
  margin: $margin;
  background: var(--color-bg-1);
  padding: $padding;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
:deep(.arco-checkbox-group) {
  width: 100%;
}
</style>
